import React from "react";
import BaseComponent from "../../redare/components/BaseComponent";
import {Tooltip} from "antd";

export default class EllipsisTooltip extends BaseComponent{

    static defaultProps = {
        width: '',
        maxWidth: '',
        title: ''
    };

    constructor(props) {
        super(props);
        this.state = {
            visible: false
        }
    }

    onVisibleChange(visible) {
        //div实际宽度（clientWidth：width + 左右padding）小于真实宽度（scrollWidth:可视区域宽度+被隐藏区域宽度）
        if (this.container.clientWidth < this.container.scrollWidth) {
            this.setState({visible})
        }
    }

    render() {
        let {children,title,width,maxWidth} = this.props;
        if( !title && children && children.constructor === String ){
            title = children;
        }
        return (
          <Tooltip visible={this.state.visible} onVisibleChange={(visible) => this.onVisibleChange(visible)} title={title}>
              <div style={{width, maxWidth}} ref={o => this.container = o} className="ellipsis-tooltip-grid">
                  {this.props.children}
              </div>
          </Tooltip>
        );
    }

}